import React from 'react';
import {observer, inject} from 'mobx-react';

import {Layout, Button, confirm, toast} from "amis";
import HomeHeader from "../component/home/HomeHeader";
import HomeAsideNav from "../component/home/HomeAsideNav";
import NotFound from "./NotFound";
import {IHomeStore} from "../store/HomeStore";
import {homeStore} from "../store";
import AddPageModal from "../component/home/AddPageModal";
import AMISRenderer from "../component/AMISRenderer";
import {Route, Switch} from "react-router-dom";
import {RouteComponentProps} from "react-router";

@inject('homeStore')
@observer
export default class Home extends React.Component<{ homeStore: IHomeStore } & RouteComponentProps<{ pageId: string }>> {

    componentDidMount() {
        const {homeStore, match, history} = this.props
        homeStore.loadPageTree()

        if (match.params && match.params.pageId) {
            let pageId = match.params.pageId
            homeStore.setCurrPageId(pageId)
            history.push(`/pages/${pageId}`)
        }
    }

    render() {
        const {homeStore, history} = this.props

        return (
            <Layout
                header={<HomeHeader {...this.props}/>}
                aside={<HomeAsideNav homeStore={homeStore}/>}
            >

                <div className={'page-edit'}>
                    {homeStore.isPreview ? null : (
                        <div className={'edit-buttons'}>
                            <Button
                                size="sm"
                                level="light"
                                className="m-r-xs"
                                onClick={() => history.push(`/pageEditor/${homeStore.currPageId}`)}
                            >
                                设计当前页面
                            </Button>
                            <Button
                                size="sm"
                                level="danger"
                                className="m-r-xs"
                                onClick={() => {
                                    confirm('确认要删除当前页面？').then(confirmed => {
                                        if (confirmed) {
                                            homeStore.deleteCurrPage()
                                                .then(() => {
                                                    toast.success('操作成功')
                                                    history.push('/pages/root')
                                                })
                                                .catch(e => {
                                                    toast.error(e.message || '操作失败')
                                                })
                                        }
                                    });
                                }}
                            >
                                删除当前页面
                            </Button>
                        </div>
                    )}

                    <Switch>
                        {homeStore.pages && homeStore.pages.map(item => (
                            <Route
                                key={item.id}
                                path={`/pages/${item.id}`}
                                render={() => <AMISRenderer schema={item.schema}/>}
                            />
                        ))}
                        <Route component={NotFound}/>
                    </Switch>
                </div>

                <AddPageModal
                    show={homeStore.addPageModalVisible}
                    onClose={() => homeStore.setAddPageModalVisible(false)}
                    onConfirm={(formData: any) => homeStore.addPage(formData)}
                />
            </Layout>
        );
    }
}